Shining Light on the Shadow DOM

Light DOM, Shadow DOM, encapsulation, slots, templates — vocabulary gets thrown around a lot when we talk about styling Web Components but how do all these pieces fit together? It’s easy to get caught up in the JavaScript of it all but in this talk, we’re going to dig into the nuances of styling these darlings of design. Together we’ll examine the cascade and learn how inheritance works when Shadow DOMs get involved. After a crash-course in terminology, we’ll explore some of the “gotchas”, look at browser inconsistencies, and I’ll proffer some compatibility approaches that won’t give you a migraine. We’ll wrap things up by zooming out and examining how we can use Web Components to build consistency in a codified design library through theming.